<template>
  <div class="unitWrapper">
    <div class="unitTop">
      <div class="unitTitleContainer">
        <div class="unitFlag"></div>
        <div class="unitTitle">职业标杆</div>
      </div>
      <div class="saveBtns" v-if="!isSuperToken && false">
        <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate()">
          <img src="@/assets/detail/AI_white.png" />
          {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
        </div>
        <div class="contentItemEditAndAIBtn" @click="handleEditClick">
          <img src="@/assets/detail/edit_white.png" />
          {{ currentEdit ? "退出编辑" : "编辑" }}
        </div>
        <div class="contentItemEditAndAIBtn saveEditBtn" @click="save()"
          v-if="isAdmin == true && currentEdit && !editAll">
          <!-- <img src="@/assets/detail/save.png" /> -->
          保存
        </div>
      </div>
    </div>
    <div :class="{
        unitContent: true,
      }">
      <div class="left-pic">
        <img :src="currentPic" alt="" />
        <p v-if="currentPic">图片来源:百度百科</p>
      </div>
      <div class="right-content">
        <div class="top-select">
          <div :class="[activeIndex == index ? 'top-item-active' : 'top-item']" v-for="(item, index) in benchMarkList"
            :key="index" @click="changeActiveIndex(index)">
            {{ item }}
          </div>
        </div>
        <div class="bench-mark-name">
          <div class="name-job-box">
            <div class="name">{{ currentBenchMarkInfo.name }}</div>
            <div class="job">{{ currentBenchMarkInfo.job }}</div>
          </div>
          <div class="desc">{{ currentBenchMarkInfo.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { assemblyByLayer } from "@/api/job-develop-path.js";

export default {
  name: "jobBenchmark",
  props: {
    isSuperToken: {
      type: Boolean,
      default: false,
    },
    jobBenchmarkData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      activeIndex: 0,
      benchMarkList: ["刘先林", "陈俊勇", "陈军"],
      currentBenchMarkInfo: {
        img: "",
        name: "刘先林",
        job: "中国工程院院士、摄影测量与遥感专家",
        desc: "刘先林是中国工程士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界刘先林是中国工程院首批院士，被誉为测绘界",
      },
      currentBenchMarkInfoList: [],
      currentPic: "",
    };
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.currentBenchMarkInfo = this.currentBenchMarkInfoList[index];
      this.currentPic = this.currentBenchMarkInfo.img;
    },
    async assemblyByLayerFn() {
      const params = {
        layerIds: this.jobBenchmarkData.layerId,
        positionId: this.$route.query.id,
      };
      const res = await assemblyByLayer(params);
      if (res.code == 200) {
        console.log("res1111", res.data[0].layerValue[res.data[0].layerKey[0]]);
        let resData = res.data[0].layerValue[res.data[0].layerKey[0]];
        this.currentBenchMarkInfoList = resData;
        this.benchMarkList = [];
        resData.forEach((item) => {
          this.benchMarkList.push(item.name);
        });
        this.currentBenchMarkInfo = this.currentBenchMarkInfoList[0];
        this.currentPic = this.currentBenchMarkInfo.img;
      }
    },
  },
  mounted() {
    console.log("jobBenchmarkData", this.jobBenchmarkData);
    this.assemblyByLayerFn();
  },
};
</script>

<style lang="scss" scoped>
.unitWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 56px;
  // height: 100px;
  .unitTop {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background: linear-gradient(260deg, #48a8ff 0%, #1470fa 100%);
    border-radius: 8px 8px 0px 0px;
    opacity: 0.87;
    // padding: 10px 18px;
    .unitTitleContainer {
      display: flex;
      align-items: center;
      .unitFlag {
        width: 5px;
        height: 15px;
        background: #4880ff;
        border-radius: 3px;
        margin-right: 8px;
      }
      .unitTitle {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #000000;
        line-height: 25px;
      }
    }

    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .saveEditBtn {
        width: 57px;
        height: 26px;
        color: #3674ff;
        background-color: #fff;
        border-radius: 4px;
        justify-content: center;
      }
    }
  }
  .unitContent {
    height: 264px;
    background: #ffffff;
    border-radius: 0px 0px 8px 8px;
    // border: 1px solid #D7E4FF;
    padding: 14px 0 14px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    .left-pic {
      width: 280px;
      height: 210px;
      // background-color: red;
      border-radius: 8px;
      text-align: center;
      // border: 1px solid #bfbfbf;
      background-color: #f0f0f0;
      img {
        // width: 100%;
        height: 100%;
        max-width: 100%;
      }
      p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-top: 4px;
      }
    }
    .right-content {
      flex: 1;
      margin-left: 28px;
      .top-select {
        display: flex;
        font-size: 14px;
        .top-item {
          margin-right: 12px;
          width: 92px;
          height: 32px;
          border-radius: 4px;
          border: 1px solid #b2bad4;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #333333;
        }
        .top-item-active {
          margin-right: 12px;
          width: 92px;
          height: 32px;
          background: #edf5ff;
          border-radius: 4px;
          border: 1px solid #1574ff;
          color: #1574ff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .bench-mark-name {
        margin-top: 19px;
        .name-job-box {
          display: flex;
          align-items: center;
          .name {
            width: 62px;
            height: 28px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            line-height: 28px;
            text-align: left;
            font-style: normal;
            margin-right: 10px;
          }
          .job {
            // width: 322px;
            height: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
        }
        .desc {
          margin-top: 16px;
          // width: 649px;
          width: 100%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #555555;
          line-height: 28px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  ::v-deep .el-input__inner {
    height: 32px;
    background: #eeeeee;
    border-radius: 2px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
    outline: none;
  }
}
</style>
